'use client';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import DashboardIcon from '@mui/icons-material/Dashboard';
import {ThemeMode, useLayoutContext} from '@/components/LayoutProvider';
import {Badge, Box, IconButton} from '@mui/material';
import AccountCircle from '@mui/icons-material/AccountCircle';
import LightMode from '@mui/icons-material/LightMode';

export default function TopNav() {
  const {setMode, mode} = useLayoutContext() as any;

  const menuId = 'primary-search-account-menu';
  return (
    <AppBar position="fixed" sx={{zIndex: 2000}}>
      <Toolbar sx={{backgroundColor: 'background.paper'}}>
        <DashboardIcon
          sx={{color: '#444', mr: 2, transform: 'translateY(-2px)'}}
        />
        <Typography variant="h6" color="text.primary">
          前端宝藏
        </Typography>
        <Box sx={{flexGrow: 1}} />
        <Box sx={{display: {xs: 'none', md: 'flex'}}}>
          <IconButton
            size="large"
            aria-label="show 17 new notifications"
            color={'default'}
            className="text-slate-500 dark:text-black"
            onClick={() => {
              setMode(
                mode === ThemeMode.white ? ThemeMode.dark : ThemeMode.white,
              );
            }}
          >
            <LightMode />
          </IconButton>
          <IconButton
            size="large"
            edge="end"
            aria-label="account of current user"
            aria-controls={menuId}
            aria-haspopup="true"
            className="text-slate-500 dark:text-black"
          >
            <AccountCircle />
          </IconButton>
        </Box>
      </Toolbar>
    </AppBar>
  );
}
